<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-07-08 23:18:58
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-07-08 23:33:38
 * @FilePath: \react\02.虚拟DOM创建的两种方式\1.使用JSX创建虚拟DOM.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>3.虚拟DOM与真实DOM</title>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于解析jsx为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="root"></div>

    <script type="text/babel">
        //1.创建虚机DOM
        const VDOM= (
            <h1><span>Hello,React,JSX</span></h1>
        )/***此处一定不要写引号,因为是虚拟DOM,因为不是字符串********/
        //2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('root'))
        // console.log('虚拟DOM',VDOM);  
        // console.log(typeof VDOM)      
        // console.log(VDOM instanceof Object)      
        const TDOM = document.getElementById('root');
        console.dir(TDOM)
        /**
         * 
         * 关于虚拟DOM 
         * 1.本质就是Object类型的对象(一般对象)
         * 2.虚拟DOM比较'轻',真实DOM比较重,因为虚拟DON是React内部再用,无需真实DOM身上那么多属性.
         * 3.虚拟DOM最终会被React转化为真实DOM,呈现再页面上.
         *{
                "type": "h1",
                "key": null,
                "ref": null,
                "props": {
                    "children": {
                        "type": "span",
                        "key": null,
                        "ref": null,
                        "props": {
                            "children": "Hello,React,JSX"
                        },
                        "_owner": null,
                        "_store": {}
                    }
                },
                "_owner": null,
                "_store": {}
            }
         * 
         * 
         * ****/ 
        </script>
</body>

</html>